import React, { Component } from 'react'
import "../assets/css/login.scss"
import { Form, Input, Button, message } from 'antd';
import { layout, tailLayout } from '../consts'
import { loginApi } from '../apis/adminsApi'

export default class Login extends Component {
    state = {
        loading: false,
    }
    onFinish = async (values) => {
        try {
            const { username, password } = values;
            this.setState({ loading: true });
            const data = await loginApi({ username, password });
            // console.log("data", data);
            this.setState({ loading: true });
            const { token, userInfo } = data;
            localStorage.setItem("token", token);
            localStorage.setItem("userInfo", JSON.stringify(userInfo));
            this.props.history.replace("/main/home");

        } catch (error) {
            console.log('err', error)
        }
        // this.props.history.push("/main");
    };

    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    render() {
        const { loading } = this.state;
        return (
            <div className="login-container">
                <div className="login-box">
                    <h1 className="login-title">一嗨租车后台管理系统</h1>
                    <Form
                        {...layout}
                        name="basic"
                        onFinish={this.onFinish}//提交表单且数据验证成功后回调事件
                        onFinishFailed={this.onFinishFailed}//提交表单且数据验证失败后回调事件
                    >
                        <Form.Item
                            label={<div style={{ color: '#000' }}>用户名</div>}
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input placeholder="请输入用户名" />
                        </Form.Item>

                        <Form.Item
                            label={<div style={{ color: '#000' }}>密码</div>}
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" loading={loading}>
                                登录
                        </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}
